<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>京苏易购电子商务</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="adminlte/plugins/fontawesome-free/css/all.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- DataTables -->
    <link rel="stylesheet" href="adminlte/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="adminlte/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="adminlte/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet" href="../adminlte/css/SourceSans.css">
</head>


<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <a href="index3.html" class="brand-link">
            <img src="adminlte/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
                 style="opacity: .8">
            <span class="brand-text font-weight-light">帷易胜(JD)商品管理</span>
        </a>

        <!-- Sidebar -->
        <div class="sidebar">
            <div th:replace="common/sidebar :: common_side('./', 'category')"></div>
        </div>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-left">
                            <li class="breadcrumb-item"><a href="#">主页</a></li>
                            <li class="breadcrumb-item active">类目信息列表</li>
                        </ol>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <button type="button" class="btn btn-primary" style="margin-right: 20px;" id="categorySync">
                                    同步数据
                                </button>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body">
                                <table id="categoryTable" class="table table-bordered table-hover">
                                    <thead>
                                    <tr>
                                        <th></th>
                                        <th>序号</th>
                                        <th>类目名称</th>
                                        <th>类目编码</th>
                                        <th>父类目编码</th>
                                        <th>类目层级</th>
                                    </tr>
                                    </thead>

                                    <!--<tbody>-->

                                    <!--<tr th:each="category, stat : ${categories}">-->
                                        <!--<td th:text="${stat.count}">1</td>-->
                                        <!--<td th:text="${category.id}">Thymus Thymi</td>-->
                                        <!--<td th:text="${category.pid}">12</td>-->
                                        <!--<td th:text="${category.name}">12</td>-->
                                        <!--<td th:text="${category.level}">12</td>-->
                                    <!--</tr>-->

                                    </tbody>

                                    <!--<tfoot>-->
                                    <!--<tr>-->
                                        <!--<th>序号</th>-->
                                        <!--<th>类目编码</th>-->
                                        <!--<th>父类目编码</th>-->
                                        <!--<th>类目名称</th>-->
                                        <!--<th>类目层级</th>-->
                                    <!--</tr>-->
                                    <!--</tfoot>-->
                                </table>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src="adminlte/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- DataTables -->
<script src="adminlte/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="adminlte/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="adminlte/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="adminlte/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>

<!-- page script -->

<style>
    .center {
        text-align:center
    }
</style>
<script>

    $(document).ready(function (){

        $("button#categorySync").click(function(){
            $.ajax({
                type: 'POST',
                url: "category/sync",
                success: function (result) {

                    if ( !!result && !!result.msg ) {
                        alert(result.msg);
                    }

                    window.location.reload();
                },
                dataType: "json"
            });
        });

        var table = $("#categoryTable").DataTable({
            language: {
                url: 'i18n/Chinese.json'
            },

            "paging": true,
            "lengthChange": true,
            "searching": false,
            "ordering": false,
            "info": true,
            "autoWidth": false,
            "bAutoWidth": false,
            "responsive": true,

            serverSide: true,
            ajax: 'category/query',
            columns: [
                {
                    "sTitle": '',
                    "sClass": "center",
                    "bSortable": false,
                    "width": "20px",
                    "mRender": function (data, type, row, meta) {
                        /*var btnBind = "<label><input type='checkbox' name='checkBox1' value='" + rec.basewxid + "'/><span class='lbl'></span></label>";*/
                        var btnBind = "<input type='checkbox' name='checkBox1' value='" + row['id'] + "'/>";
                        return btnBind;
                    }
                },
                {
                    data : null,
                    bSortable : false,
                    width : "20px",
                    render : function(data, type, row, meta) {
                        // 顯示行號
                        var startIndex = meta.settings._iDisplayStart;
                        return startIndex + meta.row + 1;
                    }
                },
                {"data": "name", "width": "200px"},
                {"data": "id", "width": "120px"},
                {"data": "pid", "width": "120px"},
                {"data": "level", "width": "100px"}
            ]
        });

        $('#categoryTable tbody').on( 'click', 'tr', function () {


            var checkBox = $(this).find("input[name='checkBox1']");

            if( checkBox.is(':checked') ) {
                checkBox.attr("checked",false);
            } else {
                checkBox.attr("checked",true);
            }
        } );



    });
</script>
</body>
</html>
